<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../icon/iconfont.css" />
    <style>
        .item {
            padding: 0 .2rem;
        }

        .aui-list .aui-list-item {
            background-size: 100% 0px !important;
            padding: .5rem 1rem;
        }

        .aui-radio:checked,
        .aui-radio.aui-checked,
        .aui-checkbox:checked,
        .aui-checkbox.aui-checked {
            background-color: #D39B51;
            border: solid 1px #D39B51;
        }

        .footer {
            margin: 1.5rem 0 0 0;
            text-align: center;
        }

        .footer>span {
            padding: .3rem 5rem;
            background: #D39B51;
            color: #FFF;
            border-radius: 5px;
        }

        .getCode {
            right: 17px;
            position: absolute;
            background: #D39B51;
            top: 1.1rem;
            font-size: 12px;
            color: #FFF;
            padding: .2rem .3rem;
            border-radius: 3px;
        }

        #btn_yzm {
            width: 3.8rem;
            height: 1.5rem;
            text-align: center;
            line-height: 1.2rem
        }
        .max-box{
          margin-top: 0.5rem
        }
        .resqult{
          padding:1.6rem 0 0 0;
          text-align:center;
          font-size:1rem;
        }
    </style>
</head>

<body>
    <div class="resqult">用户注册</div>
    <div class="max-box">
        <ul class="aui-list aui-form-list" style="padding-top:1rem">

            <li class="aui-list-item" id="is_sex">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        性别
                    </div>
                    <div class="aui-list-item-input">
                        <label><input class="aui-radio aui-radio1" type="radio" name="sex" value="1" checked> 男</label> &nbsp;&nbsp;&nbsp;
                        <label><input class="aui-radio aui-radio2" type="radio" name="sex" value="2"> 女</label>
                    </div>
                </div>
            </li>


            <li class="aui-list-item" style="position: relative;">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        手机号
                    </div>
                    <div class="aui-list-item-input">
                        <input type="number" name="tel" placeholder="请输入手机号" id="tel">
                    </div>
                </div>
                <button class="getCode" id="btn_yzm">获取验证码</button>
            </li>

            <li class="aui-list-item mobileCode">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        验证码
                    </div>
                    <div class="aui-list-item-input">
                        <input type="number" value="" name="code" placeholder="请输入验证码" id="code">
                    </div>
                </div>
            </li>

            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        登录密码
                    </div>
                    <div class="aui-list-item-input">
                        <input type="password" value="" name="password" placeholder="请输入6-18位登录密码" id="password">
                    </div>
                </div>
            </li>

            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        确认密码
                    </div>
                    <div class="aui-list-item-input">
                        <input type="password" value="" name="confirmpwd" placeholder="请再次输入密码" id="confirm">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="footer">
        <span id="register">立即注册</span>
        <p style="padding:0.8rem 0 0.8rem 0;">已有账号？<span onclick="goLogin();" style="color:#D39B51">立即登录</span></p>
        <p>注册即代表阅读并同意<span onclick="gotoInfo();" style="color:#D39B51">《使用条款》</span></p>
    </div>

</body>
<script type="text/javascript" src="../../lib/zepto.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/dns.js"></script>
<script type="text/javascript" src='../../script/aui-toast.js'></script>
<script type="text/javascript">
    apiready = function() {
          ios_sh('#is_sex'); //ios审核专用
    };
    var toast = new auiToast({
        })
    //使用条款
    function gotoInfo () {
      api.openWin({
          name: 'about',
          url: '../frame4/aboutus/index.html',
          pageParam: {} //页面代参数
      });
    }

    //立即登录
    function goLogin() {
        api.openWin({
            name: 'login',
            url: './login.html',
            pageParam: {} //页面代参数
        });
    }
    // 获取验证码
    getyzm();

    function getyzm() {
        var btn_yzm = document.getElementById("btn_yzm");
        var tel = document.getElementById("tel")
        btn_yzm.onclick = function() {
            var phone = tel.value;
            if (!(/^1[3456789]\d{9}$/.test(phone))) {
                toast.fail({
                    title:"请输入正确合法的手机号!",
                    duration:1500
                });
                return false;
            }
            clearInterval(timer);
            btn_yzm.style.backgroundColor = "#ccc";
            var time = 60;
            var timer = null;
            var that = this;
            timer = setInterval(function() {
                if (time <= 0) {
                    that.innerHTML = "重新发送!"
                    that.style.backgroundColor = "rgb(211, 155, 81)";
                    document.getElementById("btn_yzm").removeAttribute('disabled');
                    clearInterval(timer)
                } else {
                    that.innerHTML = time + 's'
                    time--;
                }
            }, 1000);
            document.getElementById("btn_yzm").setAttribute('disabled','disabled');
            console.log(tel.value);
            $.ajax({
              method:"get",
              dataType:'json',
              data:{mobile:tel.value},
              url:dns+"smscode",
              success:function (res) {
                console.log(res)
              },
              err:function (err) {
                console.log(err)
              }
            })
        }

    }
    $(".aui-radio1").click(function () {
      $(this).attr("checked","checked");
      $(".aui-radio2").removeAttr("checked");
    });
    $(".aui-radio2").click(function () {
      $(this).attr("checked","checked");
      $(".aui-radio1").removeAttr("checked");
    })
    // 立即注册
    var register = document.getElementById("register");
    register.onclick = function() {
        // 性别
        var radioList = document.getElementsByClassName("aui-radio");
        var sex;
        for(var i = 0; i< radioList.length;i++){
          if(radioList[i].checked){
            var val = radioList[i].value;
            if(val == 1){
              sex = 1;
            }else{
              sex = 2
            }
          }
        }
        // 验证手机号
        var phone = tel.value;
        if (!(/^1[3456789]\d{9}$/.test(phone))) {
          toast.fail({
              title:"请输入正确合法的手机号!",
              duration:1500
          });
            return false;
        }
        // 验证APp密码
        var password = document.getElementById("password").value;
        if (!( /^[a-zA-Z0-9]{6,18}$/.test(password))) {
            toast.fail({
                title:"请设置6-18位登录密码!",
                duration:2000
            });
            return false;
        }
        // 确认APP密码
        var repassword = document.getElementById("confirm").value;
        if (password!=repassword) {
            toast.fail({
                title:"两次输入登录密码不一样，请重新输入!",
                duration:1500
            });
            return false;
        }
        // 验证码
        var code = document.getElementById("code").value;
        // 点击注册
        $.ajax({
          type:"post",
          dataType:'json',
          data:{
            mobile:phone,
            code:code,
            password:password,
            repassword:repassword,
            clause:1,
            sex:sex
          },
          url:dns+"user/reg",
          success:function (res) {
            toast.success({
                title:"注册成功!",
                duration:1500
            });
            setTimeout(function () {
              api.openWin({
                  name: 'login',
                  url: './login.html',
                  allowEdit:true,
                  pageParam: {
                  }
              },2000);
            })
          },
          error:function (err) {
            var json = JSON.parse(err.responseText);
            toast.fail({
                title:json.msg,
                duration:1500
            });
          }
        })
    }
</script>

</html>
